<template>
  <div class="main-content">
    <el-row :gutter="20" class="content-grid">
      <el-col :span="24" class="header-section">
        <el-card
          class="tech-card welcome-card animate__animated animate__fadeInDown"
          shadow="never"
          data-aos="fade-down"
          data-aos-delay="100"
        >
          <h1 class="main-title animate__animated animate__pulse animate__infinite animate__slower">
            Hello I'm
            <span class="name-highlight">Free</span>
          </h1>
          <div class="subtitle animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="200">
            <SmileIcon class="emoji-icon" />
            <span class="role-highlight">前端</span>
            <span>开发工程师</span>
          </div>
          <div class="motto animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="300">
            <Edit3Icon class="motto-icon" />
            <span>The only way to do</span>
            <span class="great-text">great</span>
            <span>is to</span>
            <span class="love-text">love</span>
            <span>what you do.</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="social-section">
        <el-card
          class="tech-card social-card animate__animated animate__fadeInLeft"
          shadow="never"
          data-aos="fade-left"
          data-aos-delay="200"
        >
          <template #header>
            <div class="card-header">
              <Share2Icon class="header-icon" />
              <span>社交链接</span>
            </div>
          </template>
          <el-row :gutter="16">
            <el-col
              v-for="(item, index) in resData.social"
              :key="item.name"
              :xs="12" :sm="8" :md="6" :lg="4" :xl="3"
            >
              <div
                class="social-icon-item animate__animated animate__bounceIn"
                :class="`animate__delay-${index + 1}s`"
                data-aos="zoom-in"
                :data-aos-delay="300 + index * 100"
                @click="handleOpenSite(item.url)"
              >
                <component :is="getSocialIcon(item.name)" class="social-icon-img" />
                <span class="social-name">{{ item.name }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="24" class="contribution-section">
        <GiteeContribution />
      </el-col>

      <el-col
        v-for="(section, i) of resData.sectionData"
        :key="i"
        :span="24"
        class="section"
      >
        <el-card
          class="tech-card section-card animate__animated animate__fadeInRight"
          shadow="never"
          data-aos="fade-right"
          :data-aos-delay="400 + i * 200"
        >
          <template #header>
            <div class="card-header">
              <GlobeIcon class="header-icon" />
              <span>{{ section.title }}</span>
            </div>
          </template>
          <el-row :gutter="16">
            <el-col
              v-for="(item, j) of section.data"
              :key="j"
              :xs="24" :sm="12" :md="8" :lg="6" :xl="6"
            >
              <div
                class="project-card animate__animated animate__zoomIn"
                :class="`animate__delay-${j + 1}s`"
                data-aos="flip-up"
                :data-aos-delay="500 + j * 150"
                @click="handleOpenSite(item.url)"
              >
                <div class="card-content">
                  <div class="card-info">
                    <h3 class="card-title">{{ item.title }}</h3>
                    <p class="card-description">{{ item.description }}</p>
                  </div>
                  <div class="card-icon">
                    <ExternalLinkIcon class="link-icon" />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="24" class="skills-section">
        <el-card
          class="tech-card skills-card animate__animated animate__fadeInUp"
          shadow="never"
          data-aos="fade-up"
          data-aos-delay="600"
        >
          <template #header>
            <div class="card-header">
              <ZapIcon class="header-icon" />
              <span>技能专长</span>
            </div>
          </template>
          <el-row :gutter="16">
            <el-col
              v-for="(skill, index) in resData.skills"
              :key="skill.name"
              :xs="12" :sm="8" :md="6" :lg="4" :xl="3"
            >
              <div
                class="skill-item animate__animated animate__bounceIn"
                :class="`animate__delay-${index % 4 + 1}s`"
                data-aos="zoom-in"
                :data-aos-delay="700 + index * 100"
              >
                <component :is="getSkillIcon(skill.name)" class="skill-icon" />
                <span class="skill-name">{{ skill.name }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  SmileIcon, Edit3Icon, Share2Icon, GlobeIcon,
  ExternalLinkIcon, ZapIcon, GithubIcon, TwitterIcon,
  LinkedinIcon, MailIcon, Code2Icon, PaletteIcon,
  DatabaseIcon, CpuIcon, Globe2Icon, SmartphoneIcon
} from 'lucide-vue-next'

import GiteeContribution from './Contribution.vue'
import { resData } from './data'

const handleOpenSite = (url) => {
  const { MODE } = import.meta.env
  window.open(url[MODE])
}

const getSocialIcon = (name) => {
  const iconMap = {
    'GitHub': GithubIcon,
    'Twitter': TwitterIcon,
    'LinkedIn': LinkedinIcon,
    'Email': MailIcon
  }
  return iconMap[name] || Globe2Icon
}

const getSkillIcon = (name) => {
  const iconMap = {
    'Vue': Code2Icon,
    'React': Code2Icon,
    'JavaScript': Code2Icon,
    'TypeScript': Code2Icon,
    'CSS': PaletteIcon,
    'HTML': Globe2Icon,
    'Node.js': DatabaseIcon,
    'Python': CpuIcon,
    'Mobile': SmartphoneIcon
  }
  return iconMap[name] || Code2Icon
}
</script>

<style lang="scss" scoped>
.main-content {
  padding: 24px;
  background: var(--bg-primary);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;

  .header-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
  }

  span {
    font-family: 'Comic Neue', cursive;
    color: var(--text-primary);
    font-weight: 600;
  }
}

.welcome-card {
  padding: 40px 32px;
  text-align: center;
}

.main-title {
  margin-bottom: 16px;
  font-size: 3.5rem;
  font-family: 'Comic Neue', cursive;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.2;
}

@keyframes textAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.name-highlight {
  font-family: 'Comic Neue', cursive;
  background: linear-gradient(120deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  background-size: 200%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textAnimation 5s ease infinite;
}

.subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-family: 'Comic Neue', cursive;
  color: var(--text-secondary);
  gap: 12px;

  .emoji-icon {
    width: 28px;
    height: 28px;
    color: var(--accent-color);
  }

  .role-highlight {
    font-size: 1.6rem;
    color: var(--primary-color);
    font-weight: 700;
  }
}

.motto {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-family: 'Comic Neue', cursive;
  color: var(--text-secondary);
  gap: 8px;
  font-style: italic;

  .motto-icon {
    width: 22px;
    height: 22px;
    color: var(--secondary-color);
  }

  .great-text {
    color: var(--success-color);
    font-weight: 700;
  }

  .love-text {
    color: var(--primary-color);
    font-weight: 700;
  }
}

.social-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  cursor: pointer;
  text-align: center;

  .social-icon-img {
    width: 32px;
    height: 32px;
    color: var(--primary-color);
  }

  .social-name {
    font-family: 'Comic Neue', cursive;
    color: var(--text-primary);
    font-weight: 600;
  }
}

.project-card {
  padding: 20px;
  min-height: 120px;
  cursor: pointer;

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 16px;
  }

  .card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;

    .link-icon {
      width: 20px;
      height: 20px;
      color: white;
    }
  }

  .card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    height: 100%;
  }

  .card-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-family: 'Comic Neue', cursive;
    color: var(--text-primary);
    font-weight: 600;
  }

  .card-description {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
  }
}

.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  cursor: pointer;
  text-align: center;

  .skill-icon {
    width: 36px;
    height: 36px;
    color: var(--primary-color);
  }

  .skill-name {
    font-size: 1rem;
    font-family: 'Comic Neue', cursive;
    text-align: center;
    color: var(--text-primary);
    font-weight: 600;
  }
}

.section {
  margin-bottom: 24px;
}

.contribution-section {
  margin-bottom: 24px;
}

.skills-section {
  margin-bottom: 0;
}
</style>
